<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .one {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }

    .one>div,
    .two>div {
      width: 98px;
      height: 98px;
      border: 1px solid #000;
      border-radius: 50%;
      background-color: red;
      float: left;
      text-align: center;
      line-height: 98px;
    }

    .two {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
      position: absolute;
      left: 600px;
      top: 200px;
    }
  </style>
</head>

<body>
  <div class="one">
    <div draggable="true">1</div>
    <div draggable="true">2</div>
    <div draggable="true">3</div>
    <div draggable="true">4</div>
    <div draggable="true">5</div>
    <div draggable="true">6</div>
    <div draggable="true">7</div>
    <div draggable="true">8</div>
  </div>
  <div class="two"></div>

  <script>
    var boxs = document.querySelectorAll('.one div');
    //        临时的盒子 用于存放当前拖拽的元素

    var two = document.querySelector('.two');

    var temp = null;
    //         给8个小盒子分别绑定拖拽事件
    for (var i = 0; i < boxs.length; i++) {
      boxs[i].ondragstart = function () {
        //                保持当前拖拽的元素
        temp = this;
        console.log(temp);
      }

      boxs[i].ondragend = function () {
        //               当拖拽结束 ，清空temp
        temp = null;
        console.log(temp);
      }
    }

    //        目标元素的拖拽事件
    two.ondragover = function (e) {
      //            阻止拖拽的默认行为
      e.preventDefault();
    }
    //        当在目标元素上松开鼠标是触发
    two.ondrop = function () {
      //            将拖拽的元素追加到 two里面来
      this.appendChild(temp);
    }
  </script>
</body>

</html>